<template>
    <div class="calendar-template">
        <div class="calendar">
            <div class="month">
                <!--<a href="javascript:void(0);" class="close" @click="closeCalendar" v-if="!isPrdDetail"></a>-->
                <ul class="clear">
                    <li class="arrow arrow-left" @click="prevMonth"><span></span></li>
                    <li class="year-month">
                        <span class="choose-year">{{currentYear}}年</span>
                        <span class="choose-month">{{currentMonth}}月</span>
                    </li>
                    <li class="arrow arrow-right" @click="nextMonth"><span></span></li>
                </ul>
            </div>

            <table class="calendar-table">
                <thead>
                <tr>
                    <th>周日</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="week in calendarData">
                    <td v-for="(day,index) in week" :key="index">
                        <div class="td-border " v-bind:class="{'today':day.weekData.todayClass,'alone-price': day.weekData.alonePriceClass}"
                             @click="setCalendarDate(day.weekData)" v-if="!day.weekData.isDisabled">
                            <span class="day">{{day.weekData.date.getDate()}}</span>
                            <div class="price-data">
                                <p>门市价: <em>{{day.weekData.price}}</em></p>
                            </div>
                        </div>
                        <div class="td-border disabled" v-bind:class="{'today':day.weekData.todayClass}" v-else>
                            <span class="day">{{day.weekData.date.getDate()}}</span>
                        </div>
                    </td>

                </tr>
                </tbody>
            </table>

        </div>
        <el-dialog
                title="设置价格"
                :visible.sync="calendarDialog"
                width="740px"
                append-to-body>
            <el-form ref="calendarDialogForm" :model="calendarDialogForm" :rules="calendarDialogFormRules"
                     label-width="80px"
                     class="second-dialog" size="small">
                <el-form-item label="门市价" prop="price">
                    <el-input v-model="calendarDialogForm.price" class="market-price"></el-input>
                </el-form-item>
                <el-form-item label="有效日期" class="vali-date">
                    <el-col :span="10">
                        <el-form-item prop="timeStart">
                            <el-date-picker type="date" placeholder="选择日期" v-model="calendarDialogForm.timeStart" format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line center" :span="2">到</el-col>
                    <el-col :span="10">
                        <el-form-item prop="timeEnd">
                            <el-date-picker type="date" placeholder="选择日期" v-model="calendarDialogForm.timeEnd" format="yyyy-MM-dd"
                                            style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="有效星期">
                    <el-checkbox :indeterminate="calendarDialogForm.isIndeterminate"
                                 v-model="calendarDialogForm.checkAll"
                                 @change="handleCheckAllChange()">全选
                    </el-checkbox>
                    <el-checkbox-group v-model="calendarDialogForm.validateWeekdays" @change="handleCheckedWeekChange"
                                       style="display: inline-block;margin-left: 10px;">
                        <el-checkbox label="1" key="1" name="type">周一</el-checkbox>
                        <el-checkbox label="2" key="2" name="type">周二</el-checkbox>
                        <el-checkbox label="3" key="3" name="type">周三</el-checkbox>
                        <el-checkbox label="4" key="4" name="type">周四</el-checkbox>
                        <el-checkbox label="5" key="5" name="type">周五</el-checkbox>
                        <el-checkbox label="6" key="6" name="type">周六</el-checkbox>
                        <el-checkbox label="0" key="0" name="type">周日</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="small" @click="calendarDialogSave('calendarDialogForm')">保存</el-button>
            <el-button size="small" @click="resetForm('calendarDialogForm')">取 消</el-button>
            <el-button size="small" @click="resetDefaultSet()">恢复默认设置</el-button>
        </el-dialog>
    </div>
</template>
<style lang="scss">
    .second-dialog{
        .vali-date{
            margin-bottom: 0;
        }
        .market-price .el-input__inner{
            width: 200px;
        }
        .el-col-10{
            width: 33%;
        }
        .el-col-2{
            text-align: center;
        }
    }
    .calendar-template {
        .el-form {
            margin-top: 0;
            text-align: left;
        }

    }
</style>
<style lang="scss" scoped>
    ul {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style-type: none;
    }

    .month {
        height: 48px;
        padding: 9px 0;
        background: #4d4d4d;
        .close {
            display: inline-block;
            width: 20px;
            height: 20px;
            float: right;
            background: url(../../assets/image/calendar_close.png);
            margin-right: 10px;
            margin-top: 5px;
        }
        ul {
            padding: 0;
            width: 192px;
            height: 30px;
            margin: 0 auto;
            background: #333;
            color: #fff;
            text-align: center;
            li {
                float: left;
                line-height: 28px;
            }
            li.year-month {
                width: 140px;
            }
            li.arrow {
                width: 13px;
                cursor: pointer;
                span {
                    display: inline-block;
                    width: 0;
                    height: 0;
                }
            }
            li.arrow-left {
                margin-left: 15px;
            }
            li.arrow-left span {
                border-right: 5px solid #fff;
                border-top: 5px solid transparent;
                border-left: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
            li.arrow-right span {
                border-left: 5px solid #fff;
                border-top: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
        }
    }

    .calendar-table {
        width: 100%;
        border-collapse: collapse;
        th {
            height: 36px;
            line-height: 36px;
            color: #333;
            background: #f2f2f2;
            font-weight: normal;
        }
        tr td {
            height: 74px;
            border: 1px solid #ede9e9;
            position: relative;
            padding: 0;
            .td-border {
                width: 100%;
                height: 73px;
                border-color: transparent;
                box-sizing: border-box;
            }
            .td-border.today {
                border: 1px solid #13ce66;
            }
            .td-border.disabled {
                color: #b3b3b3;
                span.day {
                    color: #b3b3b3;
                }
                .price-data em {
                    color: #b3b3b3;
                }
            }
            span.day {
                display: inline-block;
                width: 50px;
                font-size: 20px;
                color: #333;
                position: absolute;
                right: 10px;
                top: 10px;
                text-align: right;
            }
            .price-data {
                display: block;
                width: 130px;
                position: absolute;
                top: 36px;
                padding-left: 16px;
                font-size: 12px;
                line-height: 18px;
                color: #403e3e;
                text-align: left;
                em {
                    font-style: normal;
                    color: #166fe3;
                }
            }
        }
        tr td.today {
            border-color: #409EFF;
        }
        tr td .alone-price{
            background: #badbfd;
        }
    }

    ul.weekdays {
        background: #f2f2f2;
        li {
            float: left;
            width: 14.285%;

            text-align: center;
        }

    }

</style>
<script src="./calendarPrice.js"></script>
